import React, { useState } from 'react'
import { Button, Input, Form } from 'react-vant';
import Dlkuang from '../../components/Dlkuang';
import { dl } from '../../request/api';
import {useNavigate} from 'react-router-dom'
import { useSelector, useDispatch } from 'react-redux'
import { TokenSlice } from '../../store/TokenSlice';
function Index() {
    const {mytoken} = useSelector(state => state.TokenSlice)
  const dispatch = useDispatch()
  const [form] = Form.useForm()
  let nav=useNavigate()
// 表单提交事件
  const onFinish = values => {
    console.log(values)
    dl(values.username,values.password).then(res=>{
      console.log(res,'dl')
      if(res.data.code==10000){
        localStorage.setItem('accessToken',res.data.data.accessToken)
         localStorage.setItem('refreshToken',res.data.data.refreshToken)
         
        nav('/')
      }
    })
  }
  // 扫码登录
  const [visible, setVisible] = useState(false)
  let sao = () => {
    console.log('111')
    setVisible(true)
  }
  return (
    <div>
      <div>
        {/* 弹窗组件 */}
        <Dlkuang visible={visible} setVisible={setVisible} ></Dlkuang>
      </div>
      {/* 表单 */}
      <Form
        form={form}
        onFinish={onFinish}
        footer={
          <div style={{ margin: '16px 16px 0' }}>
            <Button round nativeType='submit' type='primary' block>
              提交
            </Button>
          </div>
        }
      >
        <Form.Item

          rules={[{ required: true, message: '请填写用户名' }]}
          name='username'
          label='用户名'
        >
          <Input placeholder='请输入用户名' />
        </Form.Item>
        <Form.Item
          rules={[{ required: true, message: '请填写密码' }]}
          name='password'
          label='密码'
        >
          <Input placeholder='请输入密码' />
        </Form.Item>
      </Form>
      <Button onClick={() => sao()}>扫码登录</Button>
    </div>
  )
}

export default Index
